<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .padding-box{
            padding:20px
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 173, 173);
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: rgb(206, 241, 173);
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(180, 173, 241);
        }
    </style>
</head>
<body>
    <div class="box3 padding-box">
        box3
        <div class="box2 padding-box">
            box2
            <div class="box1 padding-box">
                box1
            </div>
        </div>
    </div>
    <script>
        let box1 = document.querySelector('.box1')
        let box2 = document.querySelector('.box2')
        let box3 = document.querySelector('.box3')


        // box2.onclick = function(){
        //     console.log('click box2')
        // }
        // box1.onclick = function(){
        //     console.log('click box1')
        // }
        // box3.onclick = function(){
        //     console.log('click box3')
        // }

        // document.body.addEventListener('click',function(){
        //     console.log('click body')
        // })

        box1.addEventListener('click',function(){
            console.log('click box1')
        },true)
        box2.addEventListener('click',function(){
            console.log('click box2')
        },true)
        box3.addEventListener('click',function(){
            console.log('click box3')
        },true)

        box1.addEventListener('click',function(){
            console.log('click box1')
        })
        box2.addEventListener('click',function(){
            console.log('click box2')
        })
        box3.addEventListener('click',function(){
            console.log('click box3')
        })
        box3.addEventListener('mousemove',function(e){
            console.log(e)
            // console.log('haha')
        })
    </script>
</body>
</html>